<template>
  <div class="dt-table-select">
    <!-- 选择框 -->
    <div :class="{ isdisabled: disabled}" style="display: flex">
      <div class="select-tag" @click="openDialog">
        <div>
          <el-tag v-for="(tag, index) in tagList" :key="index" type="info"
                  @close="closeTag(tag)" closable>
            {{ tag.materialTypeName|| "" }}
          </el-tag>
          <span v-if="!tagList.length" class="plactext">{{ placeholder }}</span>
        </div>
      </div>
    </div>
    <dt-dialog
      title="选择基础数据"
      append-to-body
      :visible.sync="visible"
      width="880px"
      @closeDialog="cancel"
      @comfirmBtn="comfirm"
    >
      <dt-table
        ref="table"
        v-loading="loading"
        :table-opts="tableOpts"
        :is-show-column="false"
        :is-column-search="false"

        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="pagination"
        @searchReset="handleReset"
        @searchChange="handleQuery"
        @radioChange="rowClick"
      />
    </dt-dialog>
  </div>
</template>

<script>
import { basicMaterialTypePage, getTypeDetailByBasicId } from '@/framework/api/developerCenter/basicData'

export default {
  name: 'BasicData',
  props: {
    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择数据类'
    },
    // 展示字段名
    showField: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '选择',
      tagList: [],
      visible: false, // 弹窗是否展示
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户组织机构关联表格数据
      list: [],
      // 查询参数
      filterForm: {
        pageNo: 1,
        pageSize: 1000,
        materialTypeName: '',
        enable: 1
      },
      tableOpts: {
        rowKey: 'materialTypeCode',
        highlightCurrentRow: true,
        tableData: [],
        customSearch: [],
        // 表格第一列
        firstTableCol: {
          select: false,
          width: 55
        },
        tableCol: [
          {
            prop: 'materialTypeName',
            label: '数据类名称',
            show: true,
            search: true,
            labelWidth: '86px'
          },
          {
            prop: 'materialTypeCode',
            label: '数据类编码',
            align: 'left',
            show: true
          }
        ]
      },
      multipleSelection: [],
      dataSelected: []
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.tagList = []
        } else {
          getTypeDetailByBasicId({ id: newVal }).then((res) => {
            this.tagList = [res.data]
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    openDialog() {
      this.visible = true
      this.getList()
      this.handleTableRadioHighRow(this.tagList[0])
    },
    cancel() {
      this.dataSelected = []
      this.visible = false
    },
    comfirm() {
      this.tagList = JSON.parse(JSON.stringify(this.dataSelected))
      const id = this.tagList && this.tagList.length > 0 ? this.tagList[0].id : ''
      this.$emit('input', id)
      this.$emit('saveData', id)
      this.visible = false
    },
    rowClick(row, column, event) {
      this.dataSelected = [row]
      // this.tagList = [row]
    },
    getList() {
      this.loading = true
      basicMaterialTypePage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      this.filterForm.pageNo = 1
      this.getList()
    },
    handleReset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 1000,
        materialTypeName: '',
        enable: 1
      }
      this.handleQuery()
    },
    pagination() {
      this.getList(this.filterForm)
    },
    handleTableRadioHighRow(row) {
      this.$nextTick(() => {
        this.dataSelected = [row]
        if (row) {
          this.$refs.table.setCurrentRow(row, true) // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow() // 取消高亮
        }
      })
    },
    // 删除选中
    closeTag(tag) {
      this.tagList = this.tagList.filter((item) => item.materialTypeCode != tag.materialTypeCode)
      this.comfirm()
    }
  }
}
</script>

  <style lang="scss" scoped>
  .dt-table-select{
      .select-tag {
      border: 1px #c0c4cc solid;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      height: 100%;
      padding: 0px 8px 0 8px;
      margin: auto;
      min-height: 36px;
      line-height: 36px;
      min-width: 200px;

      > div {
        margin: auto;
      }

      .el-tag {
        margin-right: 5px;
        margin-bottom: 4px;
      }
    }

    .isDisabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }

    .plactext {
      color: #dcdfe6;
    }
  }
  ::v-deep .tablediv .filter-container{
     display: flex !important;

  }
  ::v-deep .tablediv .el-button{
    align-self: flex-start;
  }
  </style>

